<template>
  <div class='cardBom'>
    <el-button @click="printing" style='margin:10px 0' >打印运单</el-button>
    <el-table
      border
      :data="state.rightData"
      highlight-current-row
      height='300'
      ref='table'
      style="width: 100%"
      @selection-change="handleSelectionChange"
      @current-change="handleCurrentChange"
      :span-method="objectSpanMethod"
      :row-class-name="tableRowClassName"
    >
      <el-table-column type="selection" width="55" align='center'/>
      <el-table-column prop="code" label="订单号" align='center' width='200'></el-table-column>
      <el-table-column prop="isvCode" label="ISV单号" align='center' width='200'></el-table-column>
      <el-table-column prop="status" label="状态" :formatter="formatterStatus" align='center' ></el-table-column>
      <el-table-column prop="pickNum" label="商品数量" align='center'></el-table-column>
      <el-table-column prop="recheckQuantity" label="复核数量" align='center'></el-table-column>
      <el-table-column label="包材" align='center'>
        <template slot-scope="scope">
          <el-select v-model="scope.row.packingMaterialCode"
          :disabled='state.modelPrintFlag'
          @change='value=>materialChange(value,scope.row,scope.row.packingMaterialList)' placeholder="包材">
            <el-option
              v-for="item in scope.row.packingMaterialList"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-dialog :visible.sync="state.modelPrintFlag" destroy-on-close  title='打印'>
      <printFaceSheet   @fatherPrintMethod="fatherPrint" :printData="state.printData" :parcelType="state.parcelType"/>



    </el-dialog> -->
  </div>
</template>
<script>
import soonPrint from '@/components/Printing/printBefore.js'
import request from '@/utils/request'
export default {
  // components:{printFaceSheet},
  name:'right',
  data(){
    return{
      state:this.$store.state.products,
      dispatch:this.$store.dispatch,
      commit:this.$store.commit,
      printData:[],
      parcelType:'',
      arrData:[],
    }
  },
  created(){
    this.commit('products/SET_CELLBACK',this.setCheckboxRow)
    window.onstorage = ({key}) => {
      if (key.indexOf('printComplete') != -1) {
        this.$message.success('打印任务执行完毕~')
        this.$refs.table.clearSelection()
        localStorage.removeItem(key)
      }
    }
  },
  methods:{
    objectSpanMethod({ row, column, rowIndex, columnIndex }){
      if(column.label === 'baocai'){
        return {
              rowspan: 0,
              colspan: this.state.rightData.length
            };
      }
    },
     materialChange(val,row,list){
       let obj = list.find(v=>v.code === val)
       let data = {
         wavePickingCode:row.wavePickingCode,
         packingMaterialCode:obj.code,
         packingMaterialName:obj.name,
         volume:obj.volume
       }
       request({
         url:'/wms/packingMaterialGoods/saveAndGenRecordForHotReview',
         method:'post',
         data
       }).then(res=>{
         this.$message.success(res.msg)
       })
     },
        //多选
    handleSelectionChange(val){
      this.arrData = val
    },
        //单选
    handleCurrentChange(){
      this.$refs.table.setCurrentRow(this.state.rightData[0]);
    },
        //设置默认选中
    setCheckboxRow(){
      this.$refs.table.setCurrentRow(this.state.rightData[0], true)
    },
        //传给store打印点击
    fatherPrint(){
      this.$store.commit('products/SET_FLAG',false)
    },
        //状态
    formatterStatus(row, column, cellValue, index ){
      if(cellValue  === '0')return '新增'
      if(cellValue  === '1')return '待分配'
      if(cellValue  === '2')return '部分分配'
      if(cellValue  === '3')return '已分配'
      if(cellValue  === '4')return '已作废'
      if(cellValue  === '5')return '生成波次中'
      if(cellValue  === '6')return '待拣货'
      if(cellValue  === '7')return '待复核'
      if(cellValue  === '8')return '复核中'
      if(cellValue  === '9')return '待发货'
      if(cellValue  === '10')return '发货中'
      if(cellValue  === '11')return '出库完成'
    },
    //打印运货单
    printing(){
       const arr = this.arrData;
      if(arr.length === 0)return this.$message.error('请选择要打印的数据')
      let array = [];
      let expressType = [];
      let oddNumbers=[]
      arr.forEach((i) => {
        if ((i.logisticsCode   && i.logisticsCode   !== '') && (i.waybillCode && i.waybillCode !== '')) {
          array.push(i.code);
          expressType.push(i.logisticsCode);
        } else {
          let v = `单号${i.code}`
          oddNumbers.push(v)
        }
      });
      if (oddNumbers.length>0) {
        this.$message.error('请选择带有承运商和运单号的单据来进行打印 ')
        return false
      }
      if (expressType.length>0) {
        let array = [...new Set(expressType)]
        if (array.length>1) {
          this.$message.error('批量打印同时只能打印同一家快递！')
          return false
        }
      }
      this.$store.commit('products/SET_PRCELTYPE',expressType[0])
      localStorage.setItem('printCode', JSON.stringify(array))
      let routeUrl = this.$router.resolve({
        path: '/printResult',
        query: {
          type: 'array',
          listInterface: 'printExpress'
        }
      })
      // window.open(routeUrl.href, '_blank')
      soonPrint(routeUrl.href)
    },
    tableRowClassName({row, rowIndex}) {
      if (['9', '11'].includes(row.status)) {
        return 'row-bg';
      }
      return '';
    }
  }
}
</script>
<style >
.btn-main[data-v-f8fd92f0]{
  bottom: 7px;
}
.el-table .row-bg {
  background: oldlace;
}
</style>
